import React from 'react';
import {View, TouchableOpacity, Text, Image, ImageBackground, Easing} from "react-native";
import * as Animatable from 'react-native-animatable';

/**
 * 仿支付宝旋转福卡
 */

class FlippingImage extends React.Component {

  componentWillReceiveProps(nextProps) {
    if (nextProps.back !== this.props.back) {
      this.view.transition({rotateY: this.props.back ? '0deg' : '180deg',},
        {rotateY: this.props.back ? '180deg' : '0deg'}, 1000, Easing.bezier(0.15, 0.73, 0.37, 1.2));
    }
  }

  render() {
    const {back = false, delay, duration = 1000, source, onPress, style = {}} = this.props;

    return (
      <Animatable.View
        ref={ref => this.view = ref}
        style={{
          ...style,
          width: 100,
          height: 100,
          backfaceVisibility: 'hidden',
        }}
        iterationCount="1"
        useNativeDriver>
        <ImageBackground
          source={source}
          resizeMode={'stretch'}
          style={{
            ...style,
            width: 100,
            height: 100,
            backfaceVisibility: 'hidden',
          }}
        >
          <TouchableOpacity
            onPress={() => {

              onPress && onPress(back)
            }}
          >
            <Text style={{backgroundColor: 'transparent'}}>点击翻转</Text>
          </TouchableOpacity>
        </ImageBackground>

      </Animatable.View>

    );
  }
}


export default class FlipCard extends React.Component {

  state = {
    back: false,
  }

  render() {
    const {back} = this.state;

    return (
      <View style={{flex: 1}}>
        <FlippingImage
          onPress={(isback) => this.onFlippPress(isback)}
          back={back}
          source={require('../assets/fu.jpg')} delay={0}/>
        <FlippingImage
          onPress={(isback) => this.onFlippPress(!isback)}
          source={require('../assets/fu2.jpg')} delay={0}
          back={!back}
          style={{position: 'absolute'}}/>


      </View>
    )
  }

  onFlippPress = (isback) => {
    this.setState({
      back: !isback,
    })
  }
}
